<template>
    <div >
        <div class="login">
            <div class="login-box">
             <el-tabs v-model="activeName">
                <el-tab-pane name="pass" >
                    <span slot="label"><i class="el-icon-lock"></i> 立即登录</span>
                    <LoginPass/>
                </el-tab-pane>
                <el-tab-pane name="phone" >
                    <span slot="label"><i class="el-icon-mobile-phone"></i> 立即注册</span>
                    <LoginCode/>
                </el-tab-pane>
            </el-tabs>
        </div>
        </div>
    </div>
</template>

<script>
import {mymixins} from "@/utils"
import LoginPass from "@/components/loginpass.vue"
import LoginCode from "@/components/regist.vue"
import {gettoken} from "@/api"
export default {
    mixins:[mymixins],
    components:{
        LoginPass,
        LoginCode
    },
    data(){
        return {
            activeName:"pass"
        }
    },
    mounted(){
        gettoken()
        .then(res=>{
            
        })
    }
}
</script>

<style lang="scss" scoped>
    .login{
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599061885893&di=85fd1aff4ac22c1551e8489ad5ea7227&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201606%2F05%2F20160605112207_wPSvK.jpeg") ;
        background-repeat:no-repeat ;
        background-size:100% 100% ;
    }

    .login-box{
            width: 450px;
            height: 400px;
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin: auto;
            border: 1px solid #854f9a;
            border-radius: 5px;
            background: rgba(255,255,255,.3);
        }
::v-deep .is-active{
    color: #892702;
}

::v-deep .el-tabs__active-bar{
    background-color: #892702;
}

::v-deep .el-tabs__nav{
            width: 100%;
            display: flex;
            // justify-content: space-around;
        }

::v-deep .el-tabs__item{
    flex:1;
    text-align:center;
}
</style>